/**
 * 图片上传功能测试页面
 * 
 * 用于测试和演示各种图片上传功能
 */
import { useState } from 'react';
import { toast } from 'sonner';
import AdminLayout from '@/components/admin/AdminLayout';
import ImageUpload from '@/components/common/ImageUpload';

export default function UploadTest() {
  const [bannerImage, setBannerImage] = useState('');
  const [newsImage, setNewsImage] = useState('');
  const [logoImage, setLogoImage] = useState('');
  const [avatarImage, setAvatarImage] = useState('');

  const handleImageUpload = (type: string) => (url: string) => {
    switch (type) {
      case 'banner':
        setBannerImage(url);
        break;
      case 'news':
        setNewsImage(url);
        break;
      case 'logo':
        setLogoImage(url);
        break;
      case 'avatar':
        setAvatarImage(url);
        break;
    }
    toast.success(`${type} 图片上传成功`);
  };

  const handleImageError = (type: string) => (error: string) => {
    toast.error(`${type} 图片上传失败: ${error}`);
  };

  return (
    <AdminLayout>
      <div className="mb-6">
        <h1 className="text-2xl font-bold text-gray-800">图片上传功能测试</h1>
        <p className="text-gray-600">测试各种尺寸和用途的图片上传功能</p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
        {/* 轮播图上传测试 */}
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">轮播图上传</h3>
          <p className="text-sm text-gray-600 mb-4">
            适用于首页轮播图，建议尺寸 1920x500px
          </p>
          <ImageUpload
            value={bannerImage}
            onChange={handleImageUpload('banner')}
            onError={handleImageError('轮播图')}
            width={320}
            height={160}
            maxSize={5}
            placeholder="上传轮播图"
            autoCompress={true}
          />
          {bannerImage && (
            <div className="mt-4">
              <p className="text-sm text-gray-600">上传的图片URL:</p>
              <p className="text-xs text-blue-600 break-all">{bannerImage}</p>
            </div>
          )}
        </div>

        {/* 新闻图片上传测试 */}
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">新闻图片上传</h3>
          <p className="text-sm text-gray-600 mb-4">
            适用于新闻封面图，建议尺寸 600x400px
          </p>
          <ImageUpload
            value={newsImage}
            onChange={handleImageUpload('news')}
            onError={handleImageError('新闻图片')}
            width={256}
            height={256}
            maxSize={5}
            placeholder="上传新闻图片"
            autoCompress={true}
          />
          {newsImage && (
            <div className="mt-4">
              <p className="text-sm text-gray-600">上传的图片URL:</p>
              <p className="text-xs text-blue-600 break-all">{newsImage}</p>
            </div>
          )}
        </div>

        {/* Logo上传测试 */}
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">Logo上传</h3>
          <p className="text-sm text-gray-600 mb-4">
            适用于公司Logo，建议正方形尺寸
          </p>
          <ImageUpload
            value={logoImage}
            onChange={handleImageUpload('logo')}
            onError={handleImageError('Logo')}
            width={128}
            height={128}
            maxSize={2}
            placeholder="上传Logo"
            autoCompress={true}
          />
          {logoImage && (
            <div className="mt-4">
              <p className="text-sm text-gray-600">上传的图片URL:</p>
              <p className="text-xs text-blue-600 break-all">{logoImage}</p>
            </div>
          )}
        </div>

        {/* 头像上传测试 */}
        <div className="bg-white rounded-xl shadow-sm p-6 border border-gray-100">
          <h3 className="text-lg font-semibold text-gray-800 mb-4">头像上传</h3>
          <p className="text-sm text-gray-600 mb-4">
            适用于用户头像，小尺寸圆形显示
          </p>
          <ImageUpload
            value={avatarImage}
            onChange={handleImageUpload('avatar')}
            onError={handleImageError('头像')}
            width={80}
            height={80}
            maxSize={1}
            placeholder="上传头像"
            autoCompress={true}
          />
          {avatarImage && (
            <div className="mt-4">
              <p className="text-sm text-gray-600">上传的图片URL:</p>
              <p className="text-xs text-blue-600 break-all">{avatarImage}</p>
            </div>
          )}
        </div>
      </div>

      {/* 功能说明 */}
      <div className="mt-8 bg-blue-50 rounded-xl p-6">
        <h3 className="text-lg font-semibold text-blue-800 mb-4">
          <i className="fa-solid fa-info-circle mr-2"></i>
          图片上传功能特性
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-blue-700">
          <div>
            <h4 className="font-medium mb-2">上传方式</h4>
            <ul className="space-y-1">
              <li>• 点击区域选择文件</li>
              <li>• 拖拽文件到上传区域</li>
              <li>• 支持预览和删除</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium mb-2">文件限制</h4>
            <ul className="space-y-1">
              <li>• 支持 JPG、PNG、WebP 格式</li>
              <li>• 文件大小限制可配置</li>
              <li>• 自动图片压缩优化</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium mb-2">用户体验</h4>
            <ul className="space-y-1">
              <li>• 实时上传进度显示</li>
              <li>• 详细的错误提示</li>
              <li>• 响应式设计适配</li>
            </ul>
          </div>
          <div>
            <h4 className="font-medium mb-2">技术特性</h4>
            <ul className="space-y-1">
              <li>• TypeScript 类型安全</li>
              <li>• 可复用组件设计</li>
              <li>• 内存管理优化</li>
            </ul>
          </div>
        </div>
      </div>

      {/* 使用示例 */}
      <div className="mt-8 bg-gray-50 rounded-xl p-6">
        <h3 className="text-lg font-semibold text-gray-800 mb-4">
          <i className="fa-solid fa-code mr-2"></i>
          使用示例
        </h3>
        <pre className="bg-gray-800 text-green-400 p-4 rounded-lg text-sm overflow-x-auto">
{`import ImageUpload from '@/components/common/ImageUpload';

// 基本使用
<ImageUpload
  value={imageUrl}
  onChange={(url) => setImageUrl(url)}
  onError={(error) => toast.error(error)}
  width={320}
  height={160}
  maxSize={5}
  placeholder="点击或拖拽上传图片"
  autoCompress={true}
/>`}
        </pre>
      </div>
    </AdminLayout>
  );
}
